<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1：图片与文字环绕</title>
		<style>
			p{
				bo rder: 1px solid red;
				floa t: left;
				font-size: 16px;/*页面文字默认大小：16px*/
				line-height: 20px;/*浮动p块元素，内容行内元素*/
				/*结论：文本不能浮动  特点：块包行*/
			}
			img{
				border: 10px solid red;
				float: left;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1：图片与文字环绕</h1>
		<img src="img/懒洋洋.png" alt="懒洋洋" width="250px" height="250px">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nesciunt consequuntur expedita et voluptates quae amet beatae, iure ad ipsam veniam provident eaque molestiae architecto voluptas in dolorem perspiciatis sapiente. lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt porro in consectetur illo id modi soluta pariatur, non vel, eius blanditiis adipisci veniam iste ullam expedita officiis incidunt? Quod, ab? Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure temporibus odio provident eos deleniti, illum architecto eveniet nisi, delectus non impedit vero! Amet officia ipsam non id. Maiores, minima nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo nobis rem deleniti blanditiis similique facilis facere laborum ipsum incidunt ea doloremque praesentium molestiae accusamus expedita, placeat voluptatum? Doloribus, ex! In! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt delectus, quis expedita facilis corporis aliquid qui doloremque veniam, accusamus repellendus laudantium, eum non consequuntur. Totam a deserunt molestiae eligendi facilis.</p>
	</body>
</html>